<template>
  <div class="">
    <div v-if="$store.state.active == 0">
      全选：
      <input type="checkbox" v-model="checkall" @change="changeall" />
      <button @click="remove">选中删除</button>
    </div>
    <van-card
      v-for="(item, index) in $store.state.list"
      :key="item.id"
      :price="item.price"
      :desc="item.subscribe"
      :title="item.name"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      v-show="item.state == $store.state.active"
    >
      <template #footer>
        <input
          type="checkbox"
          v-if="$store.state.active == 0"
          v-model="sel"
          :value="item.id"
          @change="checkitem"
        />
        <van-button
          size="mini"
          v-if="$store.state.active == 1"
          @click="change(index)"
          >付款</van-button
        >
        <van-button
          size="mini"
          v-if="$store.state.active == 2"
          @click="change(index)"
          >发货</van-button
        >
        <van-button
          size="mini"
          v-if="$store.state.active == 3"
          @click="change(index)"
          >完成</van-button
        >
        <van-button
          size="mini"
          v-if="$store.state.active == 4"
          @click="change(index)"
          >再来一单</van-button
        >
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkall: false,
      sel: [],
    };
  },
  mounted() {},
  methods: {
    changeall() {
      if (this.checkall == true) {
        let arr = this.$store.state.list.filter((item) => {
          return item.state == 0;
        });
        // this.sel = arr.map((item) => {
        //   return item.id;
        // });
        //map映射也是循环的意思，把数组中的某一个个字段提出来放在一个新的数组中
        this.sel = [];
        arr.forEach((item) => {
          this.sel.push(item.id);
        });
      } else {
        this.sel = [];
      }
    },
    checkitem() {
      let arr = this.$store.state.list.filter((item) => {
        return item.state == 0;
      });

      //筛选state是0的数据  全部tab下的数据

      if (this.sel.length == arr.length) {
        this.checkall = true;
      } else {
        this.checkall = false;
      }
    },
    remove() {
      this.$store.commit("remove", this.sel);
    },
    change(index) {
      this.$store.commit("change", index);
    },
    // change2(index) {
    //   this.$store.commit("change2", index);
    // },
    // change3(index) {
    //   this.$store.commit("change3", index);
    // },
    // change4(index) {
    //   this.$store.commit("change4", index);
    // },
  },
  components: {},
};
</script>

<style lang="scss"></style>
